<script setup lang="ts">
  import { ref, computed, onMounted, Ref } from 'vue';
  import { ElMenu, ElSubMenu, ElMenuItem, ElInput } from 'element-plus';
  import '@/views/DigitalTwin/css/left.css';
  import sendToUnity from '/@/core/communication/SendToUnity';
  import { ReceiveMessageType, Platform } from '/@/config/DeclareGlobal';
  import { getRelationByFrom, saveAsset, saveRelation } from '/@/api/thingsborad/entity/entity';
  import {
    relationResponse,
    saveAssetParams,
    saveRelationParams,
  } from '/@/api/thingsborad/entity/model/entityModel';
  interface MenuItem {
    index: string;
    icon?: URL | string;
    title: string;
    children?: MenuItem[];
  }
  // onMounted(() => {
  //   getRelationByFrom({
  //     fromId: '46eed2a0-0a0b-11f0-9456-7394060ad530',
  //     fromType: 'ASSET',
  //   }).then((response) => {
  //     relationItems.value = response;
  //     console.log(response);
  //   });
  // });
  const menuItems = ref<MenuItem[]>([
    {
      index: '1-1',
      icon: 'el-icon-document',
      title: '基础几何体',
      children: [],
    },
    { index: '1-2', icon: 'el-icon-setting', title: '地铁站' },
    { index: '1-3', icon: 'el-icon-setting', title: '城市' },
    { index: '1-4', icon: 'el-icon-setting', title: '工厂' },
    { index: '1-5', icon: 'el-icon-setting', title: '智慧仓储' },
    { index: '1-6', icon: 'el-icon-setting', title: '智慧机房' },
    { index: '1-7', icon: 'el-icon-setting', title: '智慧楼宇' },
    { index: '1-8', icon: 'el-icon-setting', title: '智慧高炉' },
    { index: '1-9', icon: 'el-icon-setting', title: '暖通' },
    { index: '1-10', icon: 'el-icon-setting', title: '石油化工厂' },
    { index: '1-11', icon: 'el-icon-setting', title: '风电能源' },
  ]);

  const relationItems: Ref<relationResponse[]> = ref([]);

  onMounted(async () => {
    try {
      // 双重类型断言解决类型不匹配问题
      const response = (await getRelationByFrom({
        fromId: '46eed2a0-0a0b-11f0-9456-7394060ad530',
        fromType: 'ASSET',
      })) as unknown as relationResponse[];
      console.log(response);
      // 运行时类型检查
      if (!Array.isArray(response)) {
        throw new Error('Invalid response format');
      }

      menuItems.value[0].children = response.map((item, index) => ({
        index: `1-1-${index + 1}`,
        icon: new URL(item.additionalInfo, import.meta.url).href,
        title: item.fromName,
      }));
    } catch (error) {
      console.error('数据加载失败:', error);
      // 设置默认值保证界面可用性
      menuItems.value[0].children = [
        {
          index: '1-1-fallback',
          icon: '/default-icon.png',
          title: '默认几何体',
        },
      ];
    }
  });
  const searchQuery = ref<string>('');

  const filteredMenuItems = computed(() => {
    if (!searchQuery.value) return menuItems.value;

    return menuItems.value.filter((item) => {
      const hasMatchingChild = item.children?.some((child) =>
        child.title.toLowerCase().includes(searchQuery.value.toLowerCase()),
      );
      return item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) || hasMatchingChild;
    });
  });
</script>

<template>
  <div class="model-view">
    <!-- 左侧导航栏容器 -->
    <div class="menu-container">
      <!-- 搜索框 -->
      <el-input v-model="searchQuery" placeholder="搜索..." class="search-box" />

      <!-- 导航栏 -->
      <el-menu
        background-color="#1e2430"
        text-color="#fff"
        active-text-color="#ffd04b"
        class="side-bar"
      >
        <el-sub-menu v-for="item in filteredMenuItems" :key="item.index" :index="item.index">
          <template #title>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
            <img v-if="child.icon" :src="child.icon" alt="" />{{ child.toName }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<style scoped>
  :deep(.el-input__wrapper) {
    background-color: gray !important;
    box-shadow: none;
  }
</style>
